<template>
	<div class="wrap">
		<div class="box1">
			<u--form labelPosition="left" :model="model1" :rules="rules" ref="uForm" labelWidth="80">
				<u-form-item label="收货人" prop="userInfo.name" borderBottom ref="item1"
					style="padding-left: 20rpx;padding-right: 20rpx;">
					<u--input v-model="model1.userInfo.linkMan" border="none"></u--input>
				</u-form-item>
				<u-form-item label="手机号码" prop="userInfo.phone" borderBottom ref="item1"
					style="padding-left: 20rpx;padding-right: 20rpx;">
					<u--input v-model="model1.userInfo.mobile" border="none"></u--input>
				</u-form-item>
				<u-form-item label="所在地区" prop="userInfo.address" borderBottom ref="item1"
					style="padding-left: 20rpx;padding-right: 20rpx;">
					<u--input v-model="model1.userInfo.provinceId" border="none"></u--input>
				</u-form-item>
				<u-form-item label="详细地址" prop="userInfo.phone" borderBottom ref="item1"
					style="padding-left: 20rpx;padding-right: 20rpx;">
					<u--input v-model="model1.userInfo.address" border="none"></u--input>
				</u-form-item>
			</u--form>
		</div>
		<div class="box2" style="padding-left: 20rpx">
			<p style="font-size: 30rpx;">默认为收货地址</p>
			<u-switch v-model="value13" asyncChange @change="asyncChange"></u-switch>
		</div>
		<div class="box3">
			<button @click="addAddress">添加地址</button>
		</div>
		<div class="box4">
			<button>删除地址</button>
		</div>
	</div>

</template>

<script>
	export default {
		data() {
			return {
				value13: true,
				list:[],
				model1: {
					userInfo: {
						linkMan: '',
						mobile: "",
						address: "",
						provinceId: '',
						cityId:"",
						districtId:"",
						isDefault:"",
						token:""
					},
				},
				rules: {
					'userInfo.name': {
						type: 'string',
						required: true,

					},
					'userInfo.phone': {
						type: 'string',
						required: true,

					},
					'userInfo.address': {
						type: 'string',
						required: true,

					},
					'userInfo.detailaddress': {
						type: 'string',
						required: true,

					},

				},
			}
		},
		methods: {
           getData() {
           	let that = this;
           	uni.request({
           		url: "https://api.it120.cc/xiaochengxu/user/shipping-address/add?token=a8d38f3f-31fd-44aa-90c4-7d5b2e5d8b2a",
           		method: "POST",
           		data:this.model1.userInfo,
           		dataType: "json",
           		header: {
           			'Content-Type': 'application/x-www-form-urlencoded'
           		},
           		success(res) {
           			// data=res.data;
           			// that.list = res.data.data;
           			// // console.log(this.list);
           			// console.log(that.list)
           			// }
						
					if(res.data.msg=="success"){
						uni.navigateTo({
							url:"../../mine/address/address"
						})
						}
					
           		},
           		fail: function(err) {
           			console.log(err);
           		}
           	})
           },
			addAddress() {
				// uni.navigateTo({
				// 	url: "../address/address"
				// })
				this.getData();
			},
			asyncChange(e) {
				uni.showModal({
					content: e ? '确定要打开吗' : '确定要关闭吗',
					success: (res) => {
						if (res.confirm) {
							this.value13 = e
						}
					}
				})
			}
		}
	}
</script>

<style>
	.wrap {
		width: 100vw;
		height: 100vh;
		background: rgb(247, 248, 250);
	}

	.box1 {
		width: 95%;
		/* height: 400rpx; */
		margin: 20rpx auto;
		background: white;
		border-radius: 10rpx;
	}

	.box2 {
		width: 93%;
		margin: 0 auto;
		height: 90rpx;
		line-height: 90rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		background: white;
		border-radius: 10rpx;
	}

	.u-button__text {
		border-radius: 20rpx;
	}

	.box3 {
		border-radius: 20rpx;
		margin: 0 auto;
		width: 90%;
		margin-top: 40rpx;
		/* height: 20rpx; */
	}

	.box3 button {
		background: rgb(27, 167, 132);
		border-radius: 40rpx;
	}

	.box4 {
		border-radius: 20rpx;
		margin: 0 auto;
		/* background: white; */
		width: 90%;
		margin-top: 40rpx;
	}

	.box4 button {
		border-radius: 40rpx;
		border: none;
		background: white;
	}
</style>